React Streaming: Progressiivinen palvelinpuolen renderöinti optimoituun käyttökokemukseen

Verkkokehityksen maailmassa nopean ja responsiivisen käyttökokemuksen tarjoaminen on ensiarvoisen tärkeää. Käyttäjät odottavat verkkosivustojen latautuvan nopeasti ja olevan interaktiivisia viipymättä. React, suosittu JavaScript-kirjasto käyttöliittymien rakentamiseen, tarjoaa tehokkaan tekniikan nimeltä Streaming Server-Side Rendering (SSR) tämän haasteen ratkaisemiseksi. Tämä artikkeli sukeltaa React Streaming SSR:n käsitteeseen, tutkien sen hyötyjä, toteutusta ja vaikutusta verkkosivuston suorituskykyyn ja käyttökokemukseen.

Mikä on palvelinpuolen renderöinti (SSR)?

Perinteinen asiakaspuolen renderöinti (CSR) sisältää HTML-, JavaScript- ja CSS-tiedostojen lataamisen selaimella ja sisällön renderöinnin asiakaspuolella. Vaikka tämä lähestymistapa on joustava, se voi johtaa viivästyneeseen alkuperäiseen renderöintiin, koska käyttäjän on odotettava kaikkien resurssien latautumista ja JavaScriptin suorittamista, ennen kuin hän näkee mitään sisältöä. SSR puolestaan renderöi React-komponentit palvelimella ja lähettää täysin renderöidyn HTML:n asiakkaalle. Tämä johtaa nopeampaan alkuperäiseen latausaikaan, koska selain vastaanottaa valmiin HTML:n, joka voidaan näyttää välittömästi.

Perinteisen SSR:n rajoitukset

Vaikka perinteinen SSR tarjoaa merkittävän parannuksen CSR:ään verrattuna, sillä on omat rajoituksensa. Perinteisessä SSR:ssä koko sovelluksen on renderöidyttävä palvelimella, ennen kuin HTML:ää lähetetään asiakkaalle. Tämä voi olla pullonkaula, erityisesti monimutkaisissa sovelluksissa, joissa on useita komponentteja ja datariippuvuuksia. Time to First Byte (TTFB) voi olla korkea, mikä johtaa käyttäjän kokemaan hitauteen.

Astu sisään React Streaming SSR: Progressiivinen lähestymistapa

React Streaming SSR voittaa perinteisen SSR:n rajoitukset omaksumalla progressiivisen lähestymistavan. Sen sijaan, että odotettaisiin koko sovelluksen renderöitymistä palvelimella, Streaming SSR jakaa renderöintiprosessin pienempiin osiin ja striimaa nämä osat asiakkaalle niiden tullessa saataville. Tämän ansiosta selain voi alkaa näyttää sisältöä paljon aikaisemmin, mikä parantaa koettua suorituskykyä ja lyhentää TTFB:tä. Ajattele sitä ravintolana, joka valmistaa ateriasi vaiheittain: alkupala tarjoillaan ensin, sitten pääruoka ja lopuksi jälkiruoka, sen sijaan, että odotettaisiin koko aterian valmistumista kerralla.

React Streaming SSR:n edut

React Streaming SSR tarjoaa lukuisia etuja verkkosivuston suorituskyvylle ja käyttökokemukselle:

• Nopeampi alkuperäinen latausaika: Striimaamalla HTML-osioita asiakkaalle selain voi alkaa näyttää sisältöä paljon aikaisemmin, mikä johtaa nopeampaan koettuun latausaikaan ja parantaa käyttäjien sitoutumista.
• Parannettu Time to First Byte (TTFB): Streaming SSR lyhentää TTFB:tä lähettämällä alkuperäisen HTML-osion heti, kun se on valmis, sen sijaan, että odotettaisiin koko sovelluksen renderöitymistä.
• Parannettu käyttökokemus: Nopeampi alkuperäinen latausaika johtaa parempaan käyttökokemukseen, koska käyttäjiä ei pidetä odottamassa sisällön ilmestymistä.
• Parempi hakukoneoptimointi (SEO): Hakukoneet voivat indeksoida sisällön tehokkaammin, koska HTML on heti saatavilla palvelimella.
• Progressiivinen hydraatio: Streaming SSR mahdollistaa progressiivisen hydraation, jossa asiakaspuolen React-koodi vähitellen liittää tapahtumakuuntelijoita ja tekee sovelluksesta interaktiivisen HTML-osioiden striimauksen aikana.
• Parannettu resurssien käyttö: Jakamalla renderöintiprosessin pienempiin osiin Streaming SSR voi parantaa resurssien käyttöä palvelimella.

Miten React Streaming SSR toimii

React Streaming SSR hyödyntää ReactDOMServer.renderToPipeableStream() APIa HTML-osioiden striimaamiseen asiakkaalle. Tämä API palauttaa luettavan striimin, joka voidaan ohjata palvelimen vastausobjektiin. Tässä on yksinkertaistettu kuvaus sen toiminnasta:

1. Palvelin vastaanottaa pyynnön sivulle.
2. Palvelin kutsuu ReactDOMServer.renderToPipeableStream() -funktiota renderöidäkseen React-sovelluksen striimiin.
3. Striimi alkaa lähettää HTML-osioita, kun React-komponentit renderöidään.
4. Palvelin ohjaa striimin vastausobjektiin ja lähettää HTML-osiot asiakkaalle.
5. Selain vastaanottaa HTML-osiot ja alkaa näyttää niitä progressiivisesti.
6. Kun kaikki HTML-osiot on vastaanotettu, selain hydratoi React-sovelluksen tehden siitä interaktiivisen.

React Streaming SSR:n toteuttaminen

React Streaming SSR:n toteuttamiseen tarvitset Node.js-palvelimen ja React-sovelluksen. Tässä on vaiheittainen opas:

1. Määritä Node.js-palvelin: Luo Node.js-palvelin käyttämällä kehystä, kuten Express tai Koa.
2. Asenna React ja ReactDOMServer: Asenna react- ja react-dom-paketit.
3. Luo React-sovellus: Luo React-sovellus komponenteilla, jotka haluat renderöidä palvelimella.
4. Käytä ReactDOMServer.renderToPipeableStream() -funktiota: Käytä palvelinkoodissasi ReactDOMServer.renderToPipeableStream() APIa renderöidäksesi React-sovelluksesi striimiin.
5. Ohjaa striimi vastausobjektiin: Ohjaa striimi palvelimen vastausobjektiin lähettääksesi HTML-osiot asiakkaalle.
6. Käsittele virheitä: Toteuta virheiden käsittely havaitaksesi virheet, joita saattaa ilmetä renderöintiprosessin aikana.
7. Lisää script-tagi hydraatiota varten: Lisää HTML-koodiin script-tagi hydratoidaksesi React-sovelluksen asiakaspuolella.

Esimerkkikoodi (palvelinpuoli):

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const App = require('./App'); // Your React component

const app = express();
const port = 3000;

app.get('/', (req, res) => {
  const { pipe, abort } = ReactDOMServer.renderToPipeableStream(, {
    bootstrapModules: [require.resolve('./client')], // Client-side entry point
    onShellReady() {
      res.setHeader('content-type', 'text/html; charset=utf-8');
      pipe(res);
    },
    onError(err) {
      console.error(err);
      res.statusCode = 500;
      res.send('
Sorry, something went wrong
');
    }
  });

  setTimeout(abort, 10000); // Optional: Timeout to prevent indefinite hanging
});

app.use(express.static('public')); // Serve static assets

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

Esimerkkikoodi (asiakaspuoli - `client.js`):

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.hydrateRoot(document,
    
);

Esimerkki React App -komponentti (App.js):

import React, { Suspense } from 'react';

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("Data loaded successfully!");
    }, 2000);
  });
}

function SlowComponent() {
  const [data, setData] = React.useState(null);

  React.useEffect(() => {
    fetchData().then(result => setData(result));
  }, []);

  if (!data) {
    throw new Promise(resolve => setTimeout(resolve, 2000)); // Simulate a loading delay
  }

  return 
{data}
;
}

export default function App() {
  return (
    

      
Welcome to Streaming SSR!
      
This is a demonstration of React Streaming SSR.
      Loading...
}>